<template>
  <div class="dashboard-editor-container">
    <div class="sigma-content">
      <div class="sigma-middle-line">
        <span class="sigma-line-text"><el-button :type="tip == false ?'primary':''" @click="today()">今日</el-button><el-button :type="tip == true ?'primary':''" @click="all()">所有</el-button></span>
      </div>
    </div>
    <panel-group :tip="tip" @handleSetLineChartData="handleSetLineChartData" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <div ref="myEchart" :style="{height:'1000px',width:'100%'}" />


  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import echarts from 'echarts'
//   import '../../node_modules/echarts/map/js/world.js'
import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['userJson'],
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      tip: false,
      data: [
        {
          'name': '北京',
          'value': 599
        },
        {
          'name': '上海',
          'value': 142
        },
        {
          'name': '黑龙江',
          'value': 44
        },
        {
          'name': '深圳',
          'value': 92
        },
        {
          'name': '湖北',
          'value': 810
        },
        {
          'name': '四川',
          'value': 453
        }
      ]
    }
  },
  mounted() {
    this.data.push(
      {
        'name': '湖南',
        'value': 253
      }
    )
    this.chinaConfigure()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    chinaConfigure() {
      // var geoCoordMap = {
      //   '杭州': [119.5313, 29.8773],
      //   '苏州': [118.8062, 31.9208],
      //   '上海': [121.4648, 31.2891],
      //   '天津': [117.4219, 39.4189],
      //   '深圳': [114.072026, 22.552194],
      //   '成都': [103.9526, 30.7617],
      //   '郑州': [113.4668, 34.6234],
      //   '宁波': [121.640618, 29.86206],
      //   '合肥': [117.29, 32.0581],
      //   '重庆': [108.384366, 30.439702],
      //   '广州': [113.12244, 23.009505],
      //   '大连': [123.1238, 42.1216],
      //   '青岛': [117.1582, 36.8701],
      //   '北京': [116.4551, 40.2539],
      //   '义乌': [120.067209, 29.346921],
      //   '东莞': [113.764742, 23.02039],
      //   '长沙': [113.0823, 28.2568],
      //   '贵阳': [106.6992, 26.7682],
      //   '珠海': [113.556111, 22.250876],
      //   '威海': [122.109148, 37.516889],
      //   '泉州': [118.58, 24.93],
      //   '赤峰': [118.87, 42.28],
      //   '厦门': [118.1, 24.46],
      //   '福州': [119.3, 26.08],
      //   '抚顺': [123.97, 41.97],
      //   '汕头': [116.69, 23.39],
      //   '海口': [110.35, 20.02],
      //   '岳阳': [113.09, 29.37],
      //   '武汉': [114.31, 30.52],
      //   '唐山': [118.02, 39.63],
      //   '石家庄': [114.48, 38.03],
      //   '哈尔滨': [126.63, 45.75],
      //   '兰州': [103.73, 36.03],
      //   '呼和浩特': [111.65, 40.82],
      //   '南昌': [115.89, 28.68],
      //   '佛山': [113.11, 23.05],
      //   '烟台': [121.39, 37.52]
      // }

      // 2013年数据
      var d1 = {
        '杭州': 10,
        '苏州': 2,
        '上海': 21,
        '天津': 4,
        '深圳': 7,
        '郑州': 7,
        '成都': 5,
        '宁波': 2,
        '合肥': 1,
        '重庆': 3,
        '广州': 19,
        '大连': 1,
        '青岛': 2,
        '北京': 16,
        '义乌': 2,
        '东莞': 1,
        '长沙': 3,
        '贵阳': 0,
        '珠海': 0,
        '威海': 0,
        '南昌': 1,
        '西安': 2,
        '南京': 6,
        '海口': 0,
        '厦门': 3,
        '沈阳': 3,
        '无锡': 0,
        '呼和浩特': 0,
        '长春': 0,
        '哈尔滨': 1,
        '武汉': 5,
        '南宁': 1,
        '昆明': 1,
        '兰州': 0,
        '唐山': 0,
        '石家庄': 2,
        '太原': 1,
        '赤峰': 0,
        '抚顺': 0,
        '珲春': 0,
        '绥芬河': 0,
        '徐州': 0,
        '南通': 1,
        '温州': 2,
        '绍兴': 0,
        '芜湖': 0,
        '福州': 5,
        '泉州': 2,
        '赣州': 2,
        '济南': 3,
        '烟台': 0,
        '洛阳': 1,
        '黄石': 0,
        '岳阳': 0,
        '汕头': 0,
        '佛山': 0,
        '泸州': 0,
        '海东': 0,
        '银川': 0
      }

      // 2014年数据
      // var d2 = {
      //   '杭州': 131,
      //   '苏州': 51,
      //   '上海': 114,
      //   '天津': 58,
      //   '深圳': 104,
      //   '郑州': 66,
      //   '成都': 35,
      //   '宁波': 59,
      //   '合肥': 28,
      //   '重庆': 68,
      //   '广州': 120,
      //   '大连': 24,
      //   '青岛': 58,
      //   '北京': 118,
      //   '义乌': 36,
      //   '东莞': 46,
      //   '长沙': 34,
      //   '贵阳': 8,
      //   '珠海': 11,
      //   '威海': 7,
      //   '南昌': 24,
      //   '西安': 35,
      //   '南京': 42,
      //   '海口': 6,
      //   '厦门': 59,
      //   '沈阳': 18,
      //   '无锡': 21,
      //   '呼和浩特': 7,
      //   '长春': 13,
      //   '哈尔滨': 16,
      //   '武汉': 52,
      //   '南宁': 14,
      //   '昆明': 10,
      //   '兰州': 5,
      //   '唐山': 3,
      //   '石家庄': 24,
      //   '太原': 13,
      //   '赤峰': 0,
      //   '抚顺': 0,
      //   '珲春': 1,
      //   '绥芬河': 3,
      //   '徐州': 5,
      //   '南通': 12,
      //   '温州': 32,
      //   '绍兴': 11,
      //   '芜湖': 3,
      //   '福州': 72,
      //   '泉州': 47,
      //   '赣州': 3,
      //   '济南': 40,
      //   '烟台': 14,
      //   '洛阳': 7,
      //   '黄石': 1,
      //   '岳阳': 1,
      //   '汕头': 8,
      //   '佛山': 31,
      //   '泸州': 0,
      //   '海东': 0,
      //   '银川': 37
      // }
      var categoryData = []
      for (var j = 0; j < d1.length; j++) {
        categoryData.push(d1[j].name)
      }
      const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({ // 进行相关配置
        backgroundColor: 'rgb(255, 255, 255)',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        title: {
          left: 'center',
          text: '全国各地区数据统计'
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false, // 是否开启平移，缩放
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        xAxis: {
          type: 'value',
          scale: true,
          position: 'top',
          min: 0,
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              color: '#aaa'
            }
          }
        },
        yAxis: {
          type: 'category',
          //  name: 'TOP 20',
          nameGap: 16,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#ddd'
            }
          },
          data: categoryData
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '注册会员数', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: this.data
        },
        // 柱状图
        {
          zlevel: 9999,
          type: 'bar',
          symbol: 'none',
          itemStyle: {
            normal: {
              color: 'red'
            }
          },
          data: d1
        }
        ]
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    today() {
      if (this.tip) {
        this.tip = false
      }
    },
    all() {
      if (!this.tip) {
        this.tip = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sigma-content{
    margin: 50px;
    text-align: center;
    background-color:#f0f2f5;
}
.sigma-middle-line:before{
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #999;
    position: relative;
    top: 18px;/*调节线高*/
    left: 0;
}
.sigma-line-text{
    display: inline-block;
    background: #f0f2f5;
    padding: 0 18px 0 18px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
